<template>
  <section class="loginContainer">
      <div class="loginInner">
          <div class="login_header">
            <h2 class="login_logo">外卖</h2>
                <div class="login_header_title">
                    <a href="javascript:;" class="admin" :class="{on:Loginway}" @click="Loginway = true">短信登录</a>
                    <a href="javascript:;" class="admin" :class="{on:!Loginway}" @click="Loginway = false">密码登录</a>
                </div>
            </div>
            <div class="login-content">
                <form @submit.prevent="login">
                    <div :class="{on:Loginway}">
                        <section class="login-message">
                            <input type="tel" maxlength="11" placeholder="请输入手机号" v-model="phone">
                            <button class="get-verification" :class="{right_phone:rightPhone}" @click.prevent="getCode">{{computedTime>0 ? `已发送验证码${computedTime}s` : '获取验证码'}}</button>
                        </section>
                        <section class="login-verification">
                            <input type="tel" maxlength="8" placeholder="验证码" v-model="code">
                        </section>
                        <section class="login-hit">
                            温馨提示：未注册外卖账号的手机号，登录是将自动注册
                            <a href="javascript:;"> 《用户协议》</a>
                        </section>
                    </div>
                    <div :class="{on:!Loginway}">
                        <section class="login-message">
                            <input type="text" maxlength="11" placeholder="手机号/邮箱/用户手机号" v-model="name">
                        </section>
                        <section class="login-verification">
                            <input type="text" maxlength="8" placeholder="密码" v-if="showPwd" v-model="pwd">
                            <input type="password" maxlength="8" placeholder="密码" v-else v-model="pwd">
                            <div class="swich-button" :class="showPwd" @click="showPwd = !showPwd">
                                <i class="el-icon-open open" v-if="showPwd"></i>
                                <i class="el-icon-turn-off off" v-else></i>
                            </div>
                        </section>
                        <section class="login-verification">
                            <input type="text" maxlength="11" placeholder="验证码" v-model="captcha">
                            <img src="http://localhost:4000/captcha" class="get_verification" alt="captcha" @click="changeCaptcha">
                        </section>
                    </div>
                    <button class="login-submit" @click="login">登录</button>
                </form>
                <a href="javascript:;" class="about-us">关于我们</a>
            </div>
            <a href="javascript:;" class="go-back" @click="$router.back()">
                <i class="el-icon-arrow-left icon"></i>
            </a>
      </div>
      <alert-tip :textAlert="AlertTip" v-show="Alertshow" @closeTip = "closeTip"></alert-tip>
  </section>
</template>

<script>
import AlertTip from '../../components/AlertTip/AlerTip.vue'
import {reqSendCode,reqPwdLogin,repSmsLogin} from '../../ajax/index.js'
export default {
    components:{
        AlertTip
    },
    data () {
        return {
            phone:'',
            Loginway: true, // true代表短信登陆, false代表密码
            computedTime:0,
            showPwd:false,
            pwd:'',
            code:'',
            name:'',
            captcha:'',
            AlertTip:'',
            Alertshow:false,
        }
    },
    methods:{
        showAlert(alertText) {
            this.Alertshow = true
            this.AlertTip = alertText
        },
        //异步获取验证码
        async getCode(){
            if(!this.computedTime){
                this.computedTime = 30
                this.interval  = setInterval(() => {
                    this.computedTime --
                    if(this.computedTime <= 0){
                        clearInterval(this.interval)
                    }
                },1000)
                const result = await reqSendCode(this.phone)
                if(result.code === 1){
                    this.showAlert(result.msg)
                    //停止倒计时
                    if(this.computedTime){
                        this.computedTime = 0
                        clearInterval(this.interval)
                        this.interval = undefined
                    }
                }
            }
        },
        //异步登录
        async login(){
            let res
            //表单验证
            if(this.Loginway){ //短信登录
                const {rightPhone,phone,code} = this
                if(!rightPhone) {
                    this.showAlert('手机号不正确')
                    return
                }else if(!/^\d{6}$/.test(code)){
                    this.showAlert('验证码不正确')
                    return
                }
                //发ajax请求短信登录
                res = await repSmsLogin(phone,code)
                //停止倒计时
                if(this.computedTime){
                    this.computedTime = 0
                    clearInterval(this.interval)
                    this.interval = undefined
                }
                if(res.code === 0){
                    const user = res.data
                    this.$router.replace('/personal')
                }else{
                    const msg = res.msg
                    this.showAlert(msg)
                }
                
                
            }else{//密码登录
                const {name,pwd,captcha} = this
                if(!name){
                    this.showAlert('用户名不正确')
                    return
                }else if(!pwd){
                    this.showAlert('密码不正确')
                    return
                }else if(!captcha){
                    this.showAlert('验证码不正确')
                    return
                }
                //发ajax请求密码登录
                res = await reqPwdLogin({name,pwd,captcha})
                
                

                if(res.code === 0){
                    this.$router.push('/personal')
                }else{
                    const msg = res.msg
                    this.showAlert(msg)
                }
                
            }
            
        },
        closeTip(){
            this.Alertshow = false
            this.AlertTip = ''
        },
        //切换新的图片验证码
        changeCaptcha(event){
            //在请求路径后面加一个时间戳，让每次请求路径携带的参数不同使得点击请求得以成功
            event.target.src = 'http://localhost:4000/captcha?time=' + Date.now()
        }
    },
    computed:{
        rightPhone(){
            return /^1\d{10}$/.test(this.phone)
        }
    }
}
</script>

<style lang="less" scoped>
.loginContainer{
    width: 100%;
    height: 100%;
    background: #fff;
       .loginInner{
            padding-top: 60px;
            width: 80%;
            margin: 0 auto;
            .login_header{
                .login_logo{
                    font-size: 40px;
                    font-weight: bold;
                    color: #02a774;
                    text-align: center;
                }
                .login_header_title{
                    padding-top: 40px;
                    text-align: center;
                    .admin{
                        color: #333;
                        font-size: 14px;
                        padding-bottom: 4px;
                        &:first-child{
                        margin-right: 40px;
                        }
                        &.on{
                        color: #02a774;
                        font-weight: 700;
                        border-bottom: 2px solid #02a774;
                        }
                    }
                }
            }
            .login-content{
                margin-top: 20px;
                >form{
                    >div{
                        display: none;
                        &.on{
                            display: block;
                        }
                        input{
                            width: 100%;
                            height: 100%;
                            padding-left: 10px;
                            box-sizing: border-box;
                            border: 1px solid #ddd;
                            border-radius: 4px;
                            outline: 0;
                            font: 400 14px Arial;
                            &:focus{
                                border: 1px solid #02a774;
                            }
                        }
                        .login-message{
                            position: relative;
                            margin-top: 16px;
                            height: 48px;
                            font-size: 14px;
                            background: #fff;
                            .get-verification{
                                position: absolute;
                                top: 50%;
                                right: 10px;
                                transform: translateY(-50%);
                                border: 0;
                                color: #ccc;
                                font-size: 14px;
                                background: transparent;
                                &.right_phone{
                                    color: black;
                                }
                            }
                    }
                    .login-verification{
                        position: relative;
                        margin-top: 16px;
                        height: 48px;
                        font-size: 14px;
                        background: #fff;
                        .get_verification{
                                position: absolute;
                                top: 50%;
                                right: 10px;
                                transform: translateY(-50%);
                                border: 0;
                                color: #ccc;
                                font-size: 14px;
                                background: transparent;
                                &.right_phone{
                                    color: black;
                                }
                            }
                        .swich-button{
                            position: absolute;
                            top: 50%;
                            right: 10px;
                            transform: translateY(-50%);
                            border: 0;
                            color: #ccc;
                            size: 20px;
                            background: transparent;
                            .open{
                                color: #02a774;
                            }
                        }
                    }
                    .login-hit{
                        margin-top: 16px;
                        font-size: 16px;
                        color: #ccc;
                        >a{
                            color: #02a774;
                        }
                    }
                }
                .login-submit{
                    display: block;
                    width: 100%;
                    height: 42px;
                    margin-top: 30px;
                    background: #4cd96f;
                    border-radius: 4px;
                    color: #fff;
                    text-align: center;
                    font-size: 16px;
                    line-height: 42pxpx;
                    border: 0;
                }
            }
            .about-us{
                display: block;
                margin-top: 20px;
                font-size: 14px;
                color: #ccc;
                text-align: center;
            }
        }
        .go-back{
            .icon{
                position:absolute;
                top: 5px;
                left: 5px;
                width: 30px;
                height: 30px;
                font-size: 25px;
            }
        }
    }
     
}
</style>